<template>
	<view class="main">
		<view class="zl-flex" style="margin-top: calc(35rpx + 160rpx);">
			<view class="">
				<image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl " mode=""
					style="width: 110rpx;height:110rpx;border-radius: 50%;overflow: hidden;"></image>
				<image v-else style="width: 110rpx;height: 110rpx;border-radius: 50%;overflow: hidden;"
					src="/static/my/avatar.png"></image>
			</view>
			<view class="zl-color-white zl-m-l-30 zl-flex-col">
				<view class="zl-flex">
					<text class="zl-font-36 zl-m-r-16">{{userInfo.nickNam?userInfo.nickName:'微信昵称'}}</text>
					<image v-if="balanceInfo.endTime===0" src="/static/my/no_vip.png" mode=""
						style="width: 42rpx;height: 32rpx;"></image>
					<image v-else src="/static/my/vip.png" mode="" style="width: 42rpx;height: 32rpx;"></image>
				</view>
				<!-- <text class="zl-font-22 zl-m-t-10" style=" opacity: 0.5;">ID:{{balanceInfo.endTime}}</text> -->
				<view class="zl-flex">
					<text class="zl-m-t-6 zl-font-22" style="opacity: 0.5;" user-select>ID:{{balanceInfo.userId}}</text>
					<view class="copy-box" @click="$util.copy(balanceInfo.userId.toString())"> 复制 </view>
				</view>
				<!-- <text class="zl-font-22 zl-m-t-6" v-else style="opacity: 0.5;">请充值会员</text> -->
			</view>
		</view>
		<view class="banner" style="position: relative;">
			<view class="zl-flex zl-row-between">
				<view class="zl-color-000 zl-font-500">
					资源包
				</view>
				<view class="renew" @click="renew">
					{{balanceInfo.endTime===0?'激活':'续费'}}
				</view>

			</view>
			<view class="">
				<text class="zl-font-22 " v-if="balanceInfo.endTime!==0"
					style="opacity: 0.5;">会员有限期至：{{$util.fomateDate(balanceInfo.endTime/1000)}}</text>
				<text class="zl-font-22" v-else style="opacity: 0.5;">请充值会员</text>
			</view>
			<view style="width: 620rpx;margin-top: 22rpx;border-bottom: 1rpx solid #bccee3;">
				<!-- <view class="progress-outer">
          <view class="progress-inner"
                :style="{'width':pro+'%'}">
          </view>
        </view> -->
			</view>
			<view class="zl-flex zl-row-between zl-m-t-34" @click="toPackageList">
				<view class="zl-color-000  zl-flex-col zl-col-center" style="width: 28%;white-space: nowrap;">
					<text class="zl-font-26  zl-font-600"
						v-if="balanceInfo.digitalCount!==infinite">{{balanceInfo.digitalCount}}/{{balanceInfo.maxDigitalCount}}</text>
					<text class="zl-font-26  zl-font-600" v-else>不限</text>
					<text class="zl-font-22 zl-m-t-6" style="opacity: 0.5;">数字分身数量(个)</text>
				</view>
				<view class="zl-color-000 zl-flex-col zl-col-center"
					style="width: 28%;white-space: nowrap;border-right: 1rpx solid #bccee3;">
					<text class="zl-font-26 zl-font-600  "
						v-if="balanceInfo.voiceCount!==infinite">{{balanceInfo.voiceCount}}/{{balanceInfo.maxVoiceCount}}</text>
					<text class="zl-font-26  zl-font-600" v-else>不限</text>
					<text class="zl-font-22 zl-m-t-6" style="opacity: 0.5;">人声数量(个)</text>
				</view>
				<view class="zl-color-000  zl-flex-col zl-col-center" style="width: 44%;white-space: nowrap;">
					<text
						class="zl-font-26 zl-font-600">{{balanceInfo.produceCount}}/{{balanceInfo.maxProduceCount}}</text>
					<text class="zl-font-22 zl-m-t-6" style="opacity: 0.5;">作品生成算力(点)</text>
				</view>
			</view>
			<!-- <view class="zl-flex zl-color-white zl-font-24" @click="toPackageList"
				style="position: absolute;bottom: 44rpx;right: 30rpx;">
				我的资源包 <image style="width: 12rpx;height: 24rpx;margin-left: 10rpx;"
					src="../../static/my/right_white.png"></image>
			</view> -->
		</view>
		<!-- <view class="recordDetail zl-m-b-30">
			<view class="title zl-flex zl-col-center ">
				<view class="line">
				</view>
				<view class="zl-font-30 zl-color-000 zl-m-l-20">
					记录明细
				</view>
			</view>
			<view class="box">
				<view class="box_item">
					数字人克隆记录
				</view>
				<view class="box_item">
					声音克隆记录
				</view>
				<view class="box_item">
					数字人视频记录
				</view>
				<view class="box_item">
					文字转语音记录
				</view>
			</view>
		</view> -->
		<view class="accountDetails zl-m-t-60" @click="toDetail">
			<view class="title zl-flex zl-col-center ">
				<image src="/static/my/detail.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
				<view class="zl-font-30 zl-color-333 zl-m-l-20"> 账户明细 </view>
			</view>
			<image src="/static/my/right.png" mode="" style="width: 14rpx;height: 26rpx;"></image>
		</view>
		<view class="accountDetails zl-m-t-30" @click="toPackageList">
			<view class="title zl-flex zl-col-center ">
				<image src="/static/my/bag.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
				<view class="zl-font-30 zl-color-333 zl-m-l-20"> 已买资源包 </view>
			</view>
			<image src="/static/my/right.png" mode="" style="width: 14rpx;height: 26rpx;"></image>
		</view>
		<view class="accountDetails zl-m-t-30" @click="toLearn" v-if="isShowJiaochen">
			<view class="title zl-flex zl-col-center ">
				<image src="/static/my/jiaoxue.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
				<view class="zl-font-30 zl-color-333 zl-m-l-20"> 教学视频 </view>
			</view>
			<image src="/static/my/right.png" mode="" style="width: 14rpx;height: 26rpx;"></image>
		</view>
		<PrivacyPoup></PrivacyPoup>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="卡密激活" v-model="cdkey" placeholder="请输入卡密"
				@confirm="submitCdkey"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	import PrivacyPoup from '@/components/PrivacyPoup.vue';
	export default {
		components: {
			PrivacyPoup,
		},
		data() {
			return {
				isShowJiaochen: getApp().globalData.isShowJiaochen,
				infinite: -99999999,
				userInfo: {
					avatarUrl: '',
					nickName: ''
				},
				balanceInfo: {
					digitalCount: 0,
					maxDigitalCount: 0,
					voiceCount: 0,
					maxVoiceCount: 0,
					produceCount: 0,
					maxProduceCount: 0,
					endTime: 0
				},
				cdkey: '',
			};
		},
		onShareAppMessage(res) {
			return {
				title: getApp().globalData.shareTitle,
				imageUrl: '/static/index/share.png',
				path: '/pages/index/index',
			};
		},
		onLoad() {
			this.getuserinfo()

		},
		async onShow() {
			await this.$onLaunched;
			this.getassetamount();
		},
		methods: {
			// 获取账户信息
			getuserinfo() {
				this.api.account.getuserinfo().then(res => {
					if (res.code === 0) {
						this.userInfo = res.data;
					} else {
						this.$util.msg(res.msg);
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！');
				})
			},
			// 获取账号资源总计
			getassetamount() {
				this.api.account.getassetamount().then(res => {
					if (res.code === 0) {
						this.balanceInfo = res.data;
					} else {
						this.$util.msg(res.msg);
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！');
				})
			},
			// 跳转到账户明细
			toDetail() {
				uni.navigateTo({
					url: '/pages/balanceDetail/balanceDetail'
				})
			},
			// 跳转到资源包列表
			toPackageList() {
				uni.navigateTo({
					url: '/pages/packageList/packageList'
				})
			},
			toLearn() {
				uni.navigateTo({
					url: '/pages/learn/jiaochen'
				})
			},
			// 续费
			renew() {
				this.cdkey = '';
				this.$refs.popup.open()
			},
			// 激活卡密
			submitCdkey() {
				// 激活卡密
				if (!this.cdkey) {
					this.$util.msg('请输入卡密！');
					return;
				}
				this.api.account.usecdkey({
					cdkey: this.cdkey,
				}).then(res => {
					if (res.code === 0) {
						this.$refs.popup.close()
						this.cdkey = '';
						this.$util.msg(res.msg);
						this.getuserinfo()
						this.getassetamount()
					} else {
						this.$util.msg(res.msg);
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！');
				})
			},
		}
	}
</script>
<style lang="scss">
	@import "css/my_bg.scss";

	.main {
		width: 100%;
		height: 100vh;
		background: url($bg02) no-repeat;
		background-size: 100% 101%;
		padding: 30rpx;

		.banner {
			margin-top: 72rpx;
			width: 690rpx;
			height: 300rpx;
			background: url($bg03) no-repeat;
			background-size: 100% 100%;
			padding: 35rpx 30rpx 0 35rpx;
		}

		.renew {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 140rpx;
			height: 58rpx;
			background: #000000;
			border-radius: 31rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #fff;
		}

		.progress-outer {
			width: 100%;
			height: 13rpx;
			background-color: #ebeef5;
			border-radius: 8rpx;
			background-color: #4b4b4b;
			position: relative;
		}

		.progress-outer .progress-inner {
			position: absolute;
			/* 只需要把这个宽度动态即可 */
			height: 100%;
			left: 0;
			top: 0;
			background-color: #67e550;
			border-radius: 8rpx;
			transition: width 0.6s ease;
			text-align: right;
			line-height: 13rpx;
		}

		.recordDetail {
			margin-top: 68rpx;
			width: 690rpx;
			height: 408rpx;
			background: #ffffff;
			border-radius: 20rpx;
			border: 1rpx solid #dad9d9;
			padding: 44rpx 30rpx;

			.box {
				margin-top: 40rpx;
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;

				.box_item {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 48%;
					height: 112rpx;
					background: #ededed;
					border-radius: 4rpx;
					font-size: 26rpx;
					color: #666666;
				}
			}
		}

		.line {
			width: 6rpx;
			height: 34rpx;
			background: #eb5e00;
			border-radius: 3rpx;
		}

		.accountDetails {
			width: 690rpx;
			height: 120rpx;
			background: #e9ebf5;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 36rpx;
		}
	}

	.copy-box {
		width: 62rpx;
		height: 28rpx;
		border-radius: 14rpx;
		border: 1rpx solid #999;
		text-align: center;
		line-height: 28rpx;
		font-size: 18rpx;
		color: #999;
		line-height: 26rpx;
		margin-left: 8rpx;
	}
</style>